<!--
 * @Descripttion:
 * @Author: zhangziyu
 * @Date: 2022-11-06 00:44:31
 * @LastEditors: zhangziyu
 * @LastEditTime: 2022-11-06 13:34:07
 * @Introduce:乡农问答
-->
<template>
  <div class="rfquestionAnswer" v-loading='loading'>
    <el-breadcrumb separator="/" class="navigation">
      <el-breadcrumb-item :to="{ path: '/' }"><span class="gray"><i class="el-icon-s-home"></i>首页</span></el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/questionAnswer' }"><span class="gray">乡农问答</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="green">问答详情</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="rfquestionAnswer-problem">
      <div class="problem">
        <i class="el-icon-question" style="color:#26b000;font-size:20px"></i>
        <span style="font-size:17px;font-weight: 600;">{{dataForm.qtitle}}</span>
      </div>
      <div class="labelList">
        <div class="titleInformationTitle">
          <span v-for="(item,index) in dataForm.labelList" :key="index">{{item.labelName}}</span>
        </div>
        <div class="statistics">
          <span>{{dataForm.createDate}}</span>
          <span>{{dataForm.readNum===null?0:dataForm.readNum}}人阅读</span>
          <span>{{dataForm.interestNum===null?0:dataForm.interestNum}}人关注</span>
        </div>
      </div>
      <div class="problemDescription">
        <p>问题描述：</p>
        <p>{{dataForm.qcontent}}</p>
        <div class="follow">
          <el-button @click="interestQuestion" type="primary" :style="isfollow?'':'background:rgba(170, 170, 170, 1);border-color:rgba(170, 170, 170, 1)'" size="mini">{{dataForm.interestFlag===0?'关注问题':'取消关注'}}</el-button>
        </div>
      </div>
      <div class="topping">
        <span v-show="dataForm.topFlag===1">置顶</span>
      </div>
    </div>
    <div class="answeringArea">
      <div class="answeringAreaLeft">
        <div class="title">
        <span>专家解答区（共{{listNum}}个回答）</span>
      </div>
      <div v-if="listNum===0">暂无专家解答</div>
      <div class="answeringArea-content" v-for="(item,index) in dataForm.allAnswerList" :key="index">
        <div class="content">
          <img style="width: 35px;height:35px" v-if="item.tbExpertDTO.publicityPhotos===null" src="../../assets/img/zjtj.png" alt="">
          <img style="width: 35px;height:35px" v-else :src="item.tbExpertDTO.publicityPhotos" alt="">
          <div class="details">
            <div class="expertName">
              <span>{{item.tbExpertDTO.expertName}}</span>
              <el-button type="primary" size="mini" @click="zjClick(item.tbExpertDTO)">专家公众号</el-button>
            </div>
            <div class="Comments">
              <div v-html="item.acontent"></div>
              <div class="commentTime">
                <span>发布于{{item.createDate}}</span>
                <div class="favoriteLikesGroup">
                  <div class="collection" @click.stop="collectOrNiceAnswer(item.id,0,item.collectFlag)">
                    <img :src="item.collectFlag===0? require('./img/collection1.png'):require('./img/collection2.png')" style="width:20px" alt="">
                    <span :style="{color:item.collectFlag===0?'#AAAAAA':'#f59a23'}">{{item.collectNum===null?0:item.collectNum}}</span>
                  </div>
                  <div class="likesNumber" @click.stop="collectOrNiceAnswer(item.id,1,item.niceFlag)">
                    <img :src="item.niceFlag===0?require('./img/fabulous1.png'):require('./img/fabulous2.png')" style="width:20px" alt="">
                    <span :style="{color:item.niceFlag===0?'#AAAAAA':'#f59a23'}">{{item.niceNum===null?0:item.niceNum}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      <div class="answeringAreaRight">
        <div class="questionAnswerMainRightContent">
          <div class="consultImmediatelyButton" @click="consultImmediately">
          </div>
          <img src="./img/consultImmediately.png" alt="">
        </div>
        <div class="relatedIssues" v-if="labelNum!==0&&listNum!==0&&relateNum!==0">
          <div class="title">
            <span>相关问题</span>
          </div>
          <div class="relatedIssuesList" v-for="(item,index) in relatedIssuesList" :key="index">
            <span>{{item.qtitle}}</span>
            <div class="dateOfPublication">
              <span>{{item.createDate}}</span>
              <span>{{item.readNum===null?0:item.readNum}}人阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <zjGzh v-if="isZj" ref="zjRef" @close="()=>{this.isZj=false}"></zjGzh>
  </div>
</template>

<script>
import zjGzh from './zjGzh.vue'
export default {
  data () {
    return {
      isfollow: true,
      dataForm: {},
      loading: false,
      listNum: 0,
      labelNum: 0,
      relateNum: 0,
      relatedIssuesList: [],
      isZj: false
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  created () {
    this.init()
  },
  components: {
    zjGzh
  },
  methods: {
    init () {
      this.getDataList()
    },
    getDataList () {
      this.loading = true
      this.$http.get(`/xnkt/tbquestionkt/getMHQuestionDetail/${this.$route.query.qid}`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        this.listNum = res.data.allAnswerList.length
        this.labelNum = res.data.labelList.length
        this.loading = false
        this.getRelateQuestion()
      }).catch(() => {})
    },
    // 获取相关问题列表
    getRelateQuestion () {
      let arr = this.dataForm.labelList
      if (arr.length === 0) {
        return false
      }
      let labelIds = []
      for (let i in arr) {
        labelIds.push(arr[i].id)
      }
      labelIds = labelIds.join(',')
      this.$http.get(`/xnkt/tbquestionkt/getRelateQuestionList/${this.$route.query.qid}/${labelIds}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.relateNum = res.data.length
        this.relatedIssuesList = res.data
      }).catch(() => {})
    },
    // 快速咨询
    consultImmediately () {
      this.$router.push({ name: 'consultingService' })
    },
    // 切换点赞收藏
    collectOrNiceAnswer (id, type, optType) {
      this.loading = true
      if (optType === 0) {
        optType = 1
      } else {
        optType = 0
      }
      this.$http.get(`/xnkt/tbquestionkt/collectOrNiceAnswer/${id}/${type}/${optType}`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.typeList = res.data
        this.lId = res.data[0].id
        this.getDataList()
      }).catch(() => { this.loading = false })
    },
    // 点击关注
    interestQuestion () {
      let optType = 0
      if (this.dataForm.interestFlag === 0) {
        optType = 1
      }
      let id = this.dataForm.id
      this.loading = true
      this.$http.get(`/xnkt/tbquestionkt/interestQuestion/${id}/${optType}`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.getDataList()
      }).catch(() => { this.loading = false })
    },
    // 点击专家公众号
    zjClick (val) {
      if (val.wxgzh === null || val.wxsph === null) {
        this.$message.error('该专家还未上传公众号！')
        return false
      }
      this.isZj = true
      this.$nextTick(() => {
        this.$refs.zjRef.init(val)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.rfquestionAnswer{
  .navigation{
    padding: 20px 0px;
    .gray{
      color: #C2C6CC;
    }
    .green{
      color:#009B46
    }
  }
  .answeringArea{
    overflow: hidden;
    margin-top: 20px;
    .title{
      border: 1px solid rgba(233, 233, 233, 1);
      padding: 13px 10px;
      span{
        font-size: 14px;
        font-weight: bold;
      }
    }
    .answeringAreaLeft{
      float: left;
      width: calc(100% - 270px);
    }
    .answeringAreaRight{
      padding-left: 20px;
      float: left;
      width: 270px;

      .questionAnswerMainRightContent {
        position: relative;
        img{
          width: 250px;
          -webkit-user-drag: none;
        }
        .consultImmediatelyButton{
          cursor: pointer;
          position: absolute;
          width: 177px;
          height: 43px;
          border-radius: 50px;
          left: 50%;
          transform: translate(-51%, 0px);
          bottom: 83px;
        }
        // padding: 40px;
        // background-color: rgba(242, 242, 242, 1);
        // border-width: 1px;
        // border-style: solid;
        // border-color: rgba(233, 233, 233, 1);
        // border-radius: 5px;
        // .button{
        //   text-align: center;
        //   margin-top: 150px;
        //   /deep/ .el-button{
        //     border-radius: 21px;
        //     padding: 15px 30px;
        //   }
        // }
      }
      .relatedIssues{
        margin-top:10px;
        .relatedIssuesList{
          cursor: pointer;
          border: 1px solid #e9e9e9;
          padding: 13px 10px;
          span{
            font-size: 13px;
            color:#7F7F7F
          }
        }
        .dateOfPublication{
          margin-top: 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          span{
            font-size: 12px;
            color: #aaaaaa;
          }
        }
      }
    }
  }
  .answeringArea-content{
    border: 1px solid #e9e9e9;
    padding: 13px;
    .content{
      display: flex;
    }
    .details{
      padding-left: 10px;
      width:100%;
      .expertName{
        display: flex;
        align-items: center;
        justify-content: space-between;
        /deep/ .el-button--primary{
          background: #26840C;
          border-color:#26840C
        }
      }
      .Comments{
        font-size: 12px;
        color: #aaaaaa;
        margin-top: 5px;
        .commentTime{
          margin-top: 5px;
        }
      }
      .commentTime{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .favoriteLikesGroup{
          font-size: 13px;
          color: #AAAAAA;
        }
        .collection{
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          line-height: 10px;
        }
        .likesNumber{
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          line-height: 10px;
          margin-left: 15px;
        }
      }
    }
  }
}
.rfquestionAnswer-problem{
  position: relative;
  padding: 20px;
  border: 1px solid;
  border-color: rgba(233, 233, 233, 1);
  .topping span{
    display: inline-block;
    padding: 3px 13px;
    background: #24a500;
    color: white;
    font-size: 12px;
  }
  .topping{
    position: absolute;
    top: -15px;
    left: 0px;
   cursor: pointer;
   margin: 15px 0px 7px;
  }
  .problem{
     display: flex;
     align-items: center;
     margin: 10px 0px;
     span {
       margin-left: 5px;
     }
  }
  .problemDescription{
    position: relative;
    background-color: rgba(249, 249, 249, 1);
    color: #aaaaaa;
    height: 150px;
    margin-left: 24px;
    margin-top: 10px;
    padding: 10px;
    font-size: 13px;
    .follow{
      position: absolute;
      right: 0px;
      bottom: 0px;
      /deep/ .el-button--primary{
        background: #26840C;
        border-color:#26840C
      }
    }
  }
  .problemDescription p{
    margin: 8px 0px;
  }
}
.labelList{
  margin-left: 24px;
  .titleInformationTitle{
    span{
      display: inline-block;
      background-color: #aaaaaa;
      padding: 2px 7px;
      font-size: 12px;
      color: white;
      border-radius: 3px;
    }
  }
  .titleInformationTitle span+span{
    margin-left: 5px;
  }
  .statistics span+span{
      margin-left: 15px;
    }
    .statistics span{
      font-size: 12px;
      color: #AAAAAA;
      background-color:#f4f4f4cf;
      padding: 3px;
      border-radius: 3px;
    }
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
